<template>
    <div class="divSureAddTask divWarehouse">
        <div class="divContent box" style="padding-top:30px;padding-bottom:30px">
            <div  v-if="tableData.length>0">
                <el-table
                :data="tableData"
                stripe
                border
                style="width: 100%"
                v-loading="loading"
                :header-cell-style="{ background: '#f9f6ee' }"
                >
                <el-table-column
                    type="index"
                    align="center"
                    width="68"
                    label="序号"
                />
                <el-table-column
                    prop="ownerName"
                    align="center"
                    label="货主名称"
                    width="160"
                />
                <el-table-column
                    prop="goodsCode"
                    align="center"
                    label="货品编号"
                    width="150"
                />
                <el-table-column
                    prop="goodsName"
                    align="center"
                    label="货品名称"
                    width="160"
                >
                </el-table-column>
                <el-table-column
                    prop="goodsTypeName"
                    align="center"
                    label="货品类型"
                    width="160"
                />
                <el-table-column
                    prop="goodsPrice"
                    align="center"
                    label="货品单价(元)"
                    width="160"
                />
                <el-table-column
                    prop="goodsGuaranteeDay"
                    align="center"
                    label="保质天数(天)"
                    width="160"
                >
                </el-table-column>
                <el-table-column
                    prop="goodsUnit"
                    align="center"
                    label="单位"
                    width="160"
                >
                </el-table-column>
                <el-table-column
                    prop="goodsVolume"
                    align="center"
                    label="体积(m³)"
                    width="160"
                >
                </el-table-column>
                <el-table-column
                    prop="planNum"
                    align="center"
                    label="到货数量"
                    width="160"
                >
                </el-table-column>
                <el-table-column
                    prop="realNum"
                    align="center"
                    label="实收总数"
                    width="150"
                >
                  <template slot-scope="{ row }">
                    <span v-if="!row.edit"><span>{{row.realNum}}</span></span>
                    <el-input
                      v-else
                      v-model="row.realNum"
                      class="editInput"
                    ></el-input>
                    <span v-if="isDetails===undefined">
                      <span
                        v-if="!row.edit"
                        class="imagesIcon imgEdit"
                        @click="row.edit = true"
                      ></span>
                      <span
                        v-if="row.edit"
                        class="imagesIcon imgSave"
                        @click="inputSureClick(row)"
                      ></span>
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="realDifferenceNum"
                    align="center"
                    label="收货差异"
                    width="160"
                >
                      <template  slot-scope="{row}">
                          <span>{{row.realNum - row.planNum}}</span>
                      </template>
                </el-table-column>
                </el-table>
                <!-- 分页 -->
                <base-pagination :total="paging.total" :limit="paging.size" @current-change="handleCurrentChange"  @size-change="handleSizeChange"></base-pagination>
            </div>
            <div
                v-else
                class="emptyTip"
            >
                <span class="imgIcon"></span>
                <p>暂无收货任务</p>
            </div>
            <div class="buttonBox" >
              <base-button
                  class="unimportanceButton"
                  @click="btnReturnClick"
              >返回</base-button>
              <base-button
                  class="minorImportantButton"
                  @click="btnSubmitClick"
                  v-if="!isDetails"
              >提交</base-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component } from 'vue-property-decorator'
import BaseButton from '@/components/base-button/index.vue'
import BasePagination from '@/components/base-pagination/index.vue'
import { IWarehouseInListTableData } from '@/module-storage-in/interface/warehouse-in-list'
import { findWarehouseInListDetailPaging, updateWarehouseInList } from '@/module-storage-in/api/warehouse-in-list'
import { ICommonReturn } from '@/utils/common-interface'
import SinglePage from '@/mixin/single-page'
import { mixins } from 'vue-class-component'

@Component({
  name: 'SureAddTask',
  components: {
    BaseButton,
    BasePagination
  }
})
export default class extends mixins(SinglePage) {
    private tableData:IWarehouseInListTableData[] = []

    private loading = false

    private paging = {
      current: 1, // 当前页码
      size: 10, // 每页数据量
      total: 0
    }

    private sumNum = 0

    private isDetails = ''

    created() {
      this.initData()
    }

    private initData() {
      this.getList()
      this.isDetails = this.$route.params.detail
    }

    private async getList() {
      this.loading = true
      const params = {
        masterId: this.$route.params.id,
        current: this.paging.current,
        size: this.paging.size
      }
      const { data } = await findWarehouseInListDetailPaging(params)
      this.loading = false
      this.tableData = data.records.map((item:IWarehouseInListTableData) => {
        return { ...item, edit: false }
      })
      this.paging.total = parseInt(data.total, 10)
    }

    private handleCurrentChange(page:number) {
      this.paging.current = page
      this.getList()
    }

    private handleSizeChange(page:number) {
      this.paging.size = page
      this.paging.current = 1
      this.getList()
    }

    private async inputSureClick(row:any) {
      if (row.realNum || row.realNum === 0) {
        const data = ((await updateWarehouseInList({ id: row.id, realNum: row.realNum })) as unknown) as ICommonReturn
        if (data.code === 0) {
          this.$message.success('修改成功')
          row.edit = false
        } else {
          this.$message.error(data.msg)
        }
      } else {
        this.$message.error('请输入实收数量')
      }
    }

    private btnSubmitClick() {
      // 进行是否有编辑状态数据的校验
      let flag = true
      this.tableData.forEach((item :any) => {
        if (item.edit || item.realNum === null || item.realNum === undefined) {
          flag = false
        }
      })
      if (flag) {
        this.closeWindow()
      } else {
        this.$message.error('任务有未填写项，不能完成')
      }
    }

    private btnReturnClick() {
      this.closeWindow()
    }
}
</script>

<style scoped lang="scss">
.divSureAddTask{
    .tableInfo{
        text-align: right;
        .unimportanceButton{
            margin-right: 20px;
        }
    }
    .buttonBox{
      margin-left: 0;
      margin-right: 0;
    }
}

</style>
